<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input-uikit</title>
    <link rel="stylesheet" href="../css/style.css" />
    <link rel="stylesheet" href="../css/ui-dialog.css" />
    <style type="text/css">
        .container{margin-top:30px;margin-left:30px;}
    </style>
</head>
<body>
    <div class="container">
        
    <div class="u-input" >
        <label for="s_s_control">输入框:</label>
        <div class="u-control" id="s_area_control"  >
            <input type="text" id="area_selector" value="选择城市" placeholder="下拉选择框" readonly="readonly"/>
            <input type="hidden" name="area_selector" id="real_area_selector" value="" />
            <span class="single"></span>
        </div>
    </div>
    <div class="u-input">
        <label for="test1">输入框:</label>
        <input type="text" id="test1" placeholder="普通输入框"/>
    </div>
    <div class="u-input">
        <label for="err_input">输入框:</label>
        <div class="u-tip">
            <input type="text" id="err_input" placeholder="输入错误"/>
        </div>
    </div>
    <div class="u-input">
        <label for="right_input">输入框:</label>
        <div class="u-tip">
        <input type="text"  id="right_input" placeholder="输入正确" value="正确时的输入框"/>
        </div>
    </div>
    <div class="u-input">
        <label for="card">输入框:</label>
        <input type="text"  id="card" class="u-card" placeholder="6226 7151 9064 9010" value="银行卡" maxlength="23"/>
    </div>
    <div class="u-input ">
        <label for="test1">输入框:</label>
        <input type="mobile"  id="mobile" placeholder="15111118888" value="手机号码" class="u-mcode f-ib"/>
        <input type="text" id="money" placeholder="88888" value="金额" class="f-ib u-money f-ml10"/><span class="unit">元</span>
    </div>
    <div class="u-input">
        <label for="test1">&nbsp;</label>
        <a href="javascript:void(0);" class="u-a-btn">+&nbsp;添加收款对象</a>
    </div>
    <div class="u-input u-vcode">
        <label for="vcode">输入框:</label>
        <input type="text"  id="vcode" class="u-vcode" placeholder="FESD"/>
        <img src="../images/code.png" alt="" class="u-vcode-img"/>
        <a href="javascript:void(0);" class="f-ib u-a-btn">换一张</a>
    </div>
    <div class="u-input" >
        <label for="ul_s_control">输入框:</label>
        <div class="u-control" id="ul_s_control" control="select" data="10,20,30" >
            <input type="text" id="ul_select" placeholder="下拉提示输入框"/>
        </div>
    </div>
    <div class="u-input" >
        <label for="s_s_control">输入框:</label>
        <div class="u-control" id="s_s_control"  >
            <input type="text" id="s_selector" value="选择问题" placeholder="下拉选择框" readonly="readonly"/>
            <input type="hidden" name="s_selector" id="real_s_selector" value="" />
            <span class="single"></span>
            <ul class="control">
                <li value="">选择问题</li>
                <li value="1">湖北</li>
                <li value="2">湖南</li>
            </ul>
        </div>
        
    </div>
    <div class="u-input" >
        <label for="table_s_control">输入框:</label>
        <div class="u-control" id="table_s_control" control="table" data="10,20,30,40,50,60" >
            <input type="text" id="table_select" placeholder="下拉输入框" />
        </div>
    </div>
     
    <div class="u-input">
        <label for="person_input">输入框:</label>
        <div class="u-control" id="person_input_control">
            <input type="text"  id="person_input" placeholder="手机号码" />
            <span class="u-ui-person"></span>
            <div class="u-ui-personbox" >
                <div class="box-header">
                    <div class="box-single"></div>
                </div>
                <div class="box-inner">
                    <ul class="box-tab f-usn" cur-index="0">
                        <li class="first" data-index="0">我的联系人</li>
                        <li class="" data-index="1">最近缴费</li>
                    </ul>
                    <ul class="box-content" cur-index="">
                        <li class="item" data-value="18711027660" data-index="0">18711027660(小明)</li>
                        <li class="item" data-value="18711027660" data-index="1">18711027660(小明)</li> 
                        <li class="item" data-value="18711027660" data-index="2">18711027660(小明)</li> 
                        <li class="item" data-value="18711027660" data-index="3">18711027660(小明)</li> 
                        <li class="item" data-value="18711027660" data-index="4">18711027660(小明)</li>
                    </ul>
                    <ul class="box-content" cur-index="">
                        <li class="item" data-value="18711027660" data-index="0">18711027660(小明)</li> 
                        <li class="item" data-value="18711027660" data-index="1">18711027660(小明)</li> 
                        <li class="item" data-value="18711027660" data-index="2">18711027660(小明)</li> 
                        <li class="item" data-value="18711027660" data-index="3">18711027660(小明)</li> 
                        <li class="item hover" data-value="18711027660" data-index="4">18711027660(小明)</li> 
                    </ul>
                </div>
            </div>
            <!--end person-box-->
        </div>
    </div>

        <table class="u-record" id="record_table">
            <thead>
                <tr>
                    <th>时间</th>
                    <th>类型</th>
                    <th>交易金额</th>
                    <th>获取成长值</th>
                    <th>累计成长值</th>
                </tr>
            </thead>
            <tbody id="load_data">
                <tr>
                    <td>数据</td>
                    <td>数据</td>
                    <td>数据</td>
                    <td>数据</td>
                    <td>数据</td>
                </tr>
                <tr>
                    <td>数据</td>
                    <td>数据</td>
                    <td>数据</td>
                    <td>数据</td>
                    <td>数据</td>
                </tr>
                <tr>
                    <td>数据</td>
                    <td>数据</td>
                    <td>数据</td>
                    <td>数据</td>
                    <td>数据</td>
                </tr>
                <tr class="last">
                    <td>数据</td>
                    <td>数据</td>
                    <td>数据</td>
                    <td>数据</td>
                    <td>数据</td>
                </tr>
                <form id="pageForm" action="./table.html">
                    <input type="hidden" id="totalPage" name="totalPage" value="0" />
                    <input type="hidden" id="totalCount" name="totalCount" value="1" />
                    <input type="hidden" id="currentPage" name="currentPage" value="1" />
                    <input type="hidden" id="pageSize" name="pageSize" value="10" />
                    <!--其他业务参数-->
                </form>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">
                       
                    </td>
                </tr>
            </tfoot>
        </table>
        
        <div id="bank" class="f-cb" style="margin-top:30px;margin-bottom:30px;">
            <div class="u-bank">
                <div class="u-bank-input u-control" id="bank_input">
                    <a href="javascript:void(0);" class="bank-icon CIB" data-value="CIB"></a>
                    <span class="single"></span>
                    <input type="hidden" name="bankCode" id="bankCode" value="CIB"/>
                    <div class="bank-list">
                        <a href="javascript:void(0);" data-value="CIB" >
                            <span class="bank-icon CIB" ></span>
                        </a>
                        <a href="javascript:void(0);"  data-value="SHRCU">
                            <span class="bank-icon SHRCU" ></span>
                        </a>
                        <a href="javascript:void(0);"  data-value="PSBC">
                            <span class="bank-icon PSBC" ></span>
                        </a>
                    </div>
                </div>
                <div class="u-bank-link">
                    <a href="javascript:void(0);">选择更多银行</a>
                </div>
            </div>
        </div>
        <div id="no_bank">
            <div class="u-ver-bank">
                <div class="ver-bank-list f-cb">
                    <a href="javascript:void(0);" data-value="CIB" >
                        <span class="bank-icon CIB" ></span>
                    </a>
                    <a href="javascript:void(0);"  data-value="SHRCU">
                        <span class="bank-icon SHRCU" ></span>
                    </a>
                    <a href="javascript:void(0);"  data-value="PSBC">
                        <span class="bank-icon PSBC" ></span>
                    </a>
                    <a href="javascript:void(0);" data-value="QJCCB" >
                        <span class="bank-icon QJCCB" ></span>
                    </a>
                    <a href="javascript:void(0);"  data-value="FDB">
                        <span class="bank-icon FDB" ></span>
                    </a>
                    <a href="javascript:void(0);"  data-value="HAINRCU">
                        <span class="bank-icon HAINRCU" ></span>
                    </a>
                    <a href="javascript:void(0);" data-value="CDRCB" >
                        <span class="bank-icon CDRCB" ></span>
                    </a>
                    <a href="javascript:void(0);"  data-value="WLMQCCB">
                        <span class="bank-icon WLMQCCB" ></span>
                    </a>
                    <a href="javascript:void(0);"  data-value="DYCCB">
                        <span class="bank-icon DYCCB" ></span>
                    </a>
                    <a href="javascript:void(0);" data-value="SHRCB" >
                        <span class="bank-icon SHRCB" ></span>
                    </a>
                    <a href="javascript:void(0);"  data-value="HKB">
                        <span class="bank-icon HKB" ></span>
                    </a>
                    <a href="javascript:void(0);"  data-value="GZRCB">
                        <span class="bank-icon GZRCB" ></span>
                    </a>
                    <a href="javascript:void(0);" data-value="CMBC" >
                        <span class="bank-icon CMBC" ></span>
                    </a>
                    <a href="javascript:void(0);"  data-value="BEA">
                        <span class="bank-icon BEA" ></span>
                    </a>
                    <a href="javascript:void(0);"  data-value="SPDB">
                        <span class="bank-icon SPDB" ></span>
                    </a>
                   
                    <div class="u-bank-link">
                        <a href="javascript:void(0);">选择更多银行</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="bank-box" id="bank_box">
        <div class="bank-box-list f-cb">
            <a href="javascript:void(0);" data-value="CIB" >
                <span class="bank-icon CIB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="SHRCU">
                <span class="bank-icon SHRCU" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="PSBC">
                <span class="bank-icon PSBC" ></span>
            </a>
            <a href="javascript:void(0);" data-value="QJCCB" >
                <span class="bank-icon QJCCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="FDB">
                <span class="bank-icon FDB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="HAINRCU">
                <span class="bank-icon HAINRCU" ></span>
            </a>
            <a href="javascript:void(0);" data-value="CDRCB" >
                <span class="bank-icon CDRCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="WLMQCCB">
                <span class="bank-icon WLMQCCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="DYCCB">
                <span class="bank-icon DYCCB" ></span>
            </a>
            <a href="javascript:void(0);" data-value="SHRCB" >
                <span class="bank-icon SHRCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="HKB">
                <span class="bank-icon HKB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="GZRCB">
                <span class="bank-icon GZRCB" ></span>
            </a>
            <a href="javascript:void(0);" data-value="CMBC" >
                <span class="bank-icon CMBC" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="BEA">
                <span class="bank-icon BEA" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="SPDB">
                <span class="bank-icon SPDB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="SPABANK">
                <span class="bank-icon SPABANK" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="BBGB">
                <span class="bank-icon BBGB" ></span>
            </a>
            <a href="javascript:void(0);" data-value="SZRCB" >
                <span class="bank-icon SZRCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="TACCB">
                <span class="bank-icon TACCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="LHCCB">
                <span class="bank-icon LHCCB" ></span>
            </a>
        </div>
        <div class="bank-box-list f-cb">
            <a href="javascript:void(0);" data-value="YCCCB" >
                <span class="bank-icon YCCCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="JJB">
                <span class="bank-icon JJB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="SDRCB">
                <span class="bank-icon SDRCB" ></span>
            </a>
            <a href="javascript:void(0);" data-value="HXB" >
                <span class="bank-icon HXB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="ZHRCU">
                <span class="bank-icon ZHRCU" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="BOC">
                <span class="bank-icon BOC" ></span>
            </a>
            <a href="javascript:void(0);" data-value="CQRCB" >
                <span class="bank-icon CQRCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="ZMDCCB">
                <span class="bank-icon ZMDCCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="WHCCB">
                <span class="bank-icon WHCCB" ></span>
            </a>
            <a href="javascript:void(0);" data-value="zhongyin_zhifu" >
                <span class="bank-icon zhongyin_zhifu" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="PDSB">
                <span class="bank-icon PDSB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="SDB">
                <span class="bank-icon SDB" ></span>
            </a>
            <a href="javascript:void(0);" data-value="HSB" >
                <span class="bank-icon HSB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="QLB">
                <span class="bank-icon QLB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="ICBC">
                <span class="bank-icon ICBC" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="SHRCU">
                <span class="bank-icon SHRCU" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="BCOM">
                <span class="bank-icon BCOM" ></span>
            </a>
            <a href="javascript:void(0);" data-value="CBHB" >
                <span class="bank-icon CBHB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="YDRCB">
                <span class="bank-icon YDRCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="JZCCB">
                <span class="bank-icon JZCCB" ></span>
            </a>
        </div>
        <!--3-->
        <div class="bank-box-list f-cb">
            <a href="javascript:void(0);" data-value="HBB" >
                <span class="bank-icon HBB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="CMB">
                <span class="bank-icon CMB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="SRB">
                <span class="bank-icon SRB" ></span>
            </a>
            <a href="javascript:void(0);" data-value="SMXCCB" >
                <span class="bank-icon SMXCCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="SCB">
                <span class="bank-icon SCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="SZB">
                <span class="bank-icon SZB" ></span>
            </a>
            <a href="javascript:void(0);" data-value="ZJCCB" >
                <span class="bank-icon ZJCCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="ECITIC">
                <span class="bank-icon ECITIC" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="GDB">
                <span class="bank-icon GDB" ></span>
            </a>
            <a href="javascript:void(0);" data-value="WZB" >
                <span class="bank-icon WZB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="NBB">
                <span class="bank-icon NBB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="HUNRCU">
                <span class="bank-icon HUNRCU" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="DGB">
                <span class="bank-icon DGB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="DLB">
                <span class="bank-icon DLB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="NXB">
                <span class="bank-icon NXB" ></span>
            </a>
             <a href="javascript:void(0);" data-value="HBCCB" >
                <span class="bank-icon HBCCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="QSB">
                <span class="bank-icon QSB" ></span>
            </a>
            <a href="javascript:void(0);" data-value="ZJGRCB" >
                <span class="bank-icon ZJGRCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="ABC">
                <span class="bank-icon ABC" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="CEBB">
                <span class="bank-icon CEBB" ></span>
            </a>
        </div>
        <div class="bank-box-list f-cb">
            <a href="javascript:void(0);" data-value="JCB" >
                <span class="bank-icon JCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="JSRCU">
                <span class="bank-icon JSRCU" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="ZKB">
                <span class="bank-icon ZKB" ></span>
            </a>
            <a href="javascript:void(0);" data-value="RZB" >
                <span class="bank-icon RZB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="GZB">
                <span class="bank-icon GZB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="JSB">
                <span class="bank-icon JSB" ></span>
            </a>
            <a href="javascript:void(0);" data-value="SJB" >
                <span class="bank-icon SJB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="YXCCB">
                <span class="bank-icon YXCCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="XMB">
                <span class="bank-icon XMB" ></span>
            </a>
            <a href="javascript:void(0);" data-value="CCB_SD" >
                <span class="bank-icon CCB_SD" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="CCB_NB">
                <span class="bank-icon CCB_NB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="HZB">
                <span class="bank-icon HZB" ></span>
            </a>
            <a href="javascript:void(0);" data-value="BOB" >
                <span class="bank-icon BOB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="CSCB">
                <span class="bank-icon CSCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="NJCB">
                <span class="bank-icon NJCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="BJRCB">
                <span class="bank-icon BJRCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="BOS">
                <span class="bank-icon BOS" ></span>
            </a>
            <a href="javascript:void(0);" data-value="NCB" >
                <span class="bank-icon NCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="LTCCB">
                <span class="bank-icon LTCCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="BSB">
                <span class="bank-icon BSB" ></span>
            </a>
        </div>
        <div class="bank-box-list f-cb">
            <a href="javascript:void(0);" data-value="CDB" >
                <span class="bank-icon CDB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="CQB">
                <span class="bank-icon CQB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="CSRCB">
                <span class="bank-icon CSRCB" ></span>
            </a>
            <a href="javascript:void(0);" data-value="CZB" >
                <span class="bank-icon CZB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="EEDSB">
                <span class="bank-icon EEDSB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="GYB">
                <span class="bank-icon GYB" ></span>
            </a>
            <a href="javascript:void(0);" data-value="GZRCC" >
                <span class="bank-icon GZRCC" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="JYRCB">
                <span class="bank-icon JYRCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="JZB">
                <span class="bank-icon JZB" ></span>
            </a>
            <a href="javascript:void(0);" data-value="FSNHRCU" >
                <span class="bank-icon FSNHRCU" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="LJB">
                <span class="bank-icon LJB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="MTCCB">
                <span class="bank-icon MTCCB" ></span>
            </a>
            <a href="javascript:void(0);" data-value="QHB" >
                <span class="bank-icon QHB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="SMXB">
                <span class="bank-icon SMXB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="TZB">
                <span class="bank-icon TZB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="TCCB">
                <span class="bank-icon TCCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="WFB">
                <span class="bank-icon WFB" ></span>
            </a>
            <a href="javascript:void(0);" data-value="QDC" >
                <span class="bank-icon QDC" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="FJRCU">
                <span class="bank-icon FJRCU" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="LZB">
                <span class="bank-icon LZB" ></span>
            </a>
        </div>
        <div class="bank-box-list f-cb">
            <a href="javascript:void(0);" data-value="HEBB" >
                <span class="bank-icon HEBB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="XZRCB">
                <span class="bank-icon XZRCB" ></span>
            </a>
            <a href="javascript:void(0);"  data-value="BEEB">
                <span class="bank-icon BEEB" ></span>
            </a>
        </div>
        
        <div class="page">
            <a class="page-btn disabled" href="javascript:void(0);">上一页</a>
            <a class="active" href="javascript:void(0);">1</a>
            <a class="" href="javascript:void(0);">2</a>
            <a class="" href="javascript:void(0);">3</a>
            <a class="" href="javascript:void(0);">4</a>
            <a class="" href="javascript:void(0);">5</a>
            <a class="" href="javascript:void(0);">6</a>
            <a class="page-btn" href="javascript:void(0);">下一页</a>
        </div>
    </div>
</body>
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../js/ui-dialog.min.js"></script>

<script type="text/javascript" src="../js/area.js"></script>
<script type="text/javascript" src="../js/input.js"></script>
<script type="text/javascript" src="../js/pagenation.js"></script>
<script type="text/javascript" src="../js/bank.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#err_input').error('错误!'); 
        var right = $('#right_input').right();
        $('#right_input').blur(function(){
                $('#right_input').removeRight();//销毁
        });
        //$('#ul_s_control').selectControl();
        CmpayUI.selectControl('#ul_s_control');
        CmpayUI.selectControl.setData('#ul_s_control',[1,2,3,4])
        $('#ul_s_control').trigger('focus');
        $('#table_s_control').tableControl();
        $('#table_s_control').trigger('focus');

        $('#s_s_control').selection();
        var areaSelect = $('#s_area_control').areaSelection();
        $('#person_input_control').personbox();
       
        $('#record_table').pagenation({callback:function(){}});
        $('#bank_input').bank();
        
    });
</script>
</html>
